<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
		font-size:14px;
	}
	div{
		width:1000px;
		margin:0 auto;
		margin-top:10px;
	}
	table{
		width:100%;
	}
	.table-list{
		border:1px solid red;
		border-collapse:collapse;
	}
	.table-list th,td{
		border:1px solid gray;
		padding:5px;
		text-align:center;
	}
	h4{
		margin-bottom: 5px;
	}
</style>

<script type="text/javascript" src="/lib/jquery-3.4.1.js"></script>
<script type="text/javascript">

	function initTable(){ //封装	
		$.post("/um_ajax/userList",function(result){
			if(result.status=='1'){
				loadTable(result);
			}
			else{
				alert('无法获取数据，请与管理员联系！');
			}
		});
	}
	
	//加载Table数据
	function loadTable(result){
			$('.table-list tr:not(:first)').empty();//表格原始数据清除
			//each循环
			$.each(result.userList,function(index,user){
				//创建tr行对象
				var $tr = $('<tr></tr>')
				//创建td单元格行对象
				var $td1 = $('<td'+'>'+user.account+'</td>')
				var $td2 = $('<td>'+user.name+'</td>')
				var $td3 = $('<td>'+user.job+'</td>')
				var $td4 = $('<td>'+user.deptId+'</td>')
				var $td5 = $('<td></td>')
				//创建table对象
				var $table = $('.table-list')
				//创建超链接对象
				//var $a1 = $('<a>删除</a>')
				//var $a2 = $('<a>删除</a>')
				var $a1 = $('<a href="/um/toUpdate?id='+user.id+'">修改</a>')
				var $a2 = $('<a href="javascript:delUser([id],[name])">删除</a>')
				
				//a1,a2加入到td5中
				$td5.append($a1);
				$td5.append($a2);
				//td加入到tr中
				$tr.append($td1);
				$tr.append($td2);
				$tr.append($td3);
				$tr.append($td4);
				$tr.append($td5);
				//tr加入到table中
				$table.append($tr);
			});			
	}
	
	//初始化区域
	$(function(){
		initTable();//初始获取userList列表
		//系统用户查询
		$('#btnQuery').click(function(){
			
			//增加表格的标题
			$.post("/um_ajax/userListByName",{
					txtQuery:$('#txtQuery').val()
					},function(result){
						if(result.status=='1'){
							loadTable(result);
						}
						else{
							alert('无法获取数据，请与管理员联系！');
						}
			});
		});
		
	});
</script>

</head>
<body>

  <div >
  
	<h1>欢迎！！！</h1>
	
	<h4>系统用户查询</h4>
	<form id="frm"> 
		<input type="search" placeholder="  请输入用户名"  id="txtQuery">
		<input type="button"   value="查询用户"  id="btnQuery" >
		<input type="button"   value="增加用户" id="btnAdd">
	</form>
	 <hr>	
	<h4>系统用户列表</h4>
	<table class="table-list">
		<tr>
			<th>系统账户</th>
			<th>用户名</th>
			<th>岗位</th>
			<th>部门</th>
			<th>操作</th>			
		</tr>
	
	</table>
  </div>
</body>
</html>
    